<template>
  <div class="menu-content">
    <!-- 搜索栏卡片 -->
    <el-card class="card-container search-card">
      <div class="search-area">
        <el-row class="date-search-row">
          <el-col :span="6">
            <el-input v-model="searchParams.year" placeholder="请输入年份" class="date-input" clearable>
              <template #prefix>
                <span class="input-prefix">年</span>
              </template>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-input v-model="searchParams.month" placeholder="请输入月份" class="date-input" clearable>
              <template #prefix>
                <span class="input-prefix">月</span>
              </template>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-input v-model="searchParams.day" placeholder="请输入日期" class="date-input" clearable>
              <template #prefix>
                <span class="input-prefix">日</span>
              </template>
            </el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" class="search-button" @click="searchRobotLogs">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>

    <!-- 表格卡片 -->
    <el-card class="card-container table-card">
      <!-- 表格内容保持不变 -->
      <el-table :data="robotLogs" stripe border class="custom-table rounded-table" v-loading="loading"
        row-class-name="table-row">
        <el-table-column prop="logTime" label="时间" align="center"></el-table-column>
        <el-table-column prop="logLevel" label="日志级别" align="center"></el-table-column>
        <el-table-column prop="content" label="日志内容" align="center"></el-table-column>
        <el-table-column prop="filePath" label="日志文件" align="center">
          <template #default="scope">
            <el-link type="primary" @click="viewLogFile(scope.row.filePath)">{{ scope.row.filePath }}</el-link>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加分页控件 -->
      <div class="pagination-container">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
          layout="total, prev, pager, next, jumper" :page-sizes="[10, 20, 50]" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" prev-text="上一页" next-text="下一页" />
      </div>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue';

export default {
  name: 'RobotLogs',
  components: { Search },
  setup() {
    // 修改搜索参数为年、月、日三个独立字段
    const searchParams = ref({
      year: '',
      month: '',
      day: ''
    });
    const robotLogs = ref([
      { logTime: '2023-10-20 08:00:00', logLevel: 'INFO', content: '系统启动成功', filePath: 'robot_20231020.log' },
      { logTime: '2023-10-20 09:15:23', logLevel: 'WARNING', content: '温度偏高', filePath: 'robot_20231020.log' }
    ]);

    // 添加分页变量
    const currentPage = ref(1);
    const pageSize = ref(10);
    const total = ref(robotLogs.value.length);

    // 添加分页方法
    const handleSizeChange = (val) => {
      pageSize.value = val;
      currentPage.value = 1;
    };

    const handleCurrentChange = (val) => {
      currentPage.value = val;
    };

    // 修改搜索处理逻辑，实现按年、月、日精确匹配
    const searchRobotLogs = () => {
      currentPage.value = 1; // 重置页码
      const { year, month, day } = searchParams.value;
      const filteredLogs = robotLogs.value.filter(log => {
        // 解析日志时间中的年、月、日
        const logDate = log.logTime.split(' ')[0]; // 获取日期部分
        const [logYear, logMonth, logDay] = logDate.split('-');

        // 年、月、日精确匹配，未输入则不过滤该条件
        const yearMatch = !year || logYear === year;
        const monthMatch = !month || logMonth === month;
        const dayMatch = !day || logDay === day;

        return yearMatch && monthMatch && dayMatch;
      });
      // 更新表格数据和总数
      robotLogs.value = filteredLogs;
      total.value = filteredLogs.length;
    };
    const viewLogFile = (fileName) => {
      console.log('查看日志文件:', fileName);
    };

    return {
      searchParams,
      robotLogs,
      searchRobotLogs,
      viewLogFile,
      // 暴露分页变量和方法
      currentPage,
      pageSize,
      total,
      handleSizeChange,
      handleCurrentChange
    };
  }
};
</script>

<style scoped>
/* 添加卡片容器样式 */
.card-container {
  width: 90%;
  /* 调整为与其他页面一致的宽度 */
  margin: 0 auto 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.search-card {
  padding: 20px;
  margin-top: 20px;
}

.table-card {
  padding: 20px;
}

/* 调整搜索容器宽度 */
.search-area {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  width: 100%;
}

.search-input {
  width: 300px;
}

/* 移除原有样式定义 */
/* 机器人日志表格样式 */
/* ::v-deep .custom-repair-table { ... } */
/* 表头蓝色背景 */
/* ::v-deep .custom-repair-table .el-table__header-wrapper th { ... } */
/* 表格行悬浮效果 */
/* ::v-deep .custom-repair-table .el-table__row { ... } */
/* ::v-deep .custom-repair-table .el-table__body tr:hover>td { ... } */
/* 日志文件链接悬浮样式 */
/* ::v-deep .custom-repair-table .el-table__body tr:hover .el-link--primary { ... } */

/* 应用AccountApproval.vue表格样式 */
/* 三级保障：加强表头样式穿透 */
::v-deep .custom-table .el-table__header-wrapper .el-table__header {
  background-color: #1890ff !important;
}

::v-deep .custom-table .el-table__header th {
  background-color: #1890ff !important;
  color: #fff !important;
  border-bottom: 2px solid white !important;
}

/* 替换为与FaultProgress.vue完全一致的三级悬浮样式 */
/* 第一级：基础表格行悬浮样式 */
/* ::v-deep .el-table .el-table__row:hover { ... } */
/* ::v-deep .custom-table .el-table__body .el-table__row:hover { ... } */
/* ::v-deep .el-table__body tr.el-table__row:hover>td { ... } */

/* 添加与UserQuery.vue完全一致的表格悬浮样式 */
::v-deep .custom-table .el-table__body-wrapper .el-table__row {
  transition: all 0.2s ease;
  position: relative;
}

/* 优化悬浮效果，防止内容溢出 */
::v-deep .custom-table .el-table__body-wrapper .el-table__row:hover {
  transform: scale(1.01);
  transform-origin: center left;
  /* 移除此处的background-color设置 */
  color: #fff !important;
  font-size: 15px;
  z-index: 10;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding: 0 5px;
}

/* 添加三级选择器设置单元格背景色 */
::v-deep .custom-table .el-table__body-wrapper .el-table__row:hover td {
  background-color: #1890ff !important;
}

/* 确保表格有足够宽度容纳放大后的内容 */
::v-deep .el-table__body {
  width: 100% !important;
}

/* 日志文件链接悬浮样式 */
::v-deep .el-table__row:hover .el-link--primary {
  color: white !important;
  text-decoration: none;
}

/* 表格样式调整 */
.custom-table {
  min-height: 400px;
  /* 拉长表格 */
  width: 100% !important;
  /* 确保表格宽度 */
}

/* 分页容器样式 */
.pagination-container {
  margin-top: 15px;
  text-align: left;
  /* 页码居左 */
  padding-left: 20px;
}

/* 分页按钮样式 */
.pagination-btn {
  display: inline-block;
  padding: 0 10px;
  height: 28px;
  line-height: 28px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  margin: 0 5px;
  cursor: pointer;
}

.pagination-btn:hover {
  border-color: #1890ff;
  color: #1890ff;
}

/* 日期搜索区域样式 */
.date-search-row {
  width: 100%;
  gap: 10px;
}

.date-input {
  width: 100%;
}

.input-prefix {
  margin-right: 5px;
  color: #606266;
}

.search-button {
  width: 100%;
}

/* 调整搜索区域布局 */
.search-area {
  display: flex;
  align-items: center;
  width: 100%;
}
</style>